<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.js可以操作dom节点
         2.js可以请求网络数据 
        因为这两个，所以可以保存比较纯粹的前端页面样子-->

    <div>
        <input type="button" value="添加" onclick="add()">    <!-- 在页面头部搞个添加 -->
    </div>
    <table id="tbData">
        <tr>
            <th>ID</th>
            <th>商品名称</th>
            <th>价格</th>
            <th>库存数量</th>
            <th>供应商</th>
            <th>操作</th>
        </tr>                    <!-- th只是比td粗而已 -->
        <tr>
            <td>11</td>
            <td>22</td>       这一块剪切掉放到init.js里并进行改
            <td>33</td>
            <td>44</td>
            <td>55</td>
            <td>
                <input type="button" value="编辑" onclick="update()">
                <input type="button" value="删除" onclick="del()">
            </td>
        </tr>
    </table>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/init.js"></script>
    <script src="./js/api.js"></script>
    <script>          /* 实现点击编辑就可以跳转 */
        function update(id){
            location.href='./addOreEdit.html?id'+id
        }     
        function add(){
            console.log('你点了一下添加按钮');
            location.href='./addOreEdit.html'
}
    </script>
</body>
</html>